<script setup>
const route = useRoute()
const router = useRouter()
const props = defineProps({
    articles: {
        type: Array,
        default: () => []
    }
})
const goToArticle = (item) => {
    router.push({ path: '/article', query: { title: item.title } })
}
</script>

<template>
    <div class="container">
        <div class="item_box" v-for="(item, index) in articles" :key="index">
            <div class="image-container" @click="goToArticle(item)">
                <img src="@/assets/markdown.png" alt="Markdown语法" />
            </div>
            <div class="passage">
                <h2 class="title" @click="goToArticle(item)">{{item.title}}</h2>
                <div class="info">
                    <span class="time">2024-01-15</span>
                    <span class="tag">技术</span>
                    <span class="tag">文档</span>
                    <span class="tag">6条评论</span>
                </div>
                <p class="text" v-for="i in index" :key="i">
                    Markdown语法自带格式参考：Markdown语法图文全面详解(10分钟学会)注意此页面偶尔会怎么样我我会怎么样会怎么样会怎么样
                </p>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    width: 100%;
    columns: 2;

    .item_box {
        background-color: #fff;
        border-radius: 10px;
        margin-bottom: 20px;
        break-inside: avoid;

        .image-container {
            width: 100%;
            height: 200px;
            overflow: hidden;
            border-radius: 10px 10px 0 0;
            cursor: pointer;

            img {
                width: 100%;
                height: 100%;
                overflow: hidden;
                object-fit: cover;
                transition: transform 0.6s;
            }
        }

        .passage {
            display: flex;
            flex-direction: column;
            padding: 30px 30px 25px 30px;

            .title {
                color: #1f2d3d;
                font-size: 18px;
                margin-bottom: 12px;
                line-height: 1.4;
                transition: color 0.2s ease-in-out;
                cursor: pointer;

                &:hover {
                    color: #49b1f5;
                }
            }

            .info {
                display: flex;
                align-items: center;
                gap: 10px;
                font-size: 14px;
                margin-bottom: 12px;
                color: #858585;

                .time {
                    color: #999;
                }

                .tag {
                    padding: 2px 8px;
                    background: #f0f0f0;
                    border-radius: 4px;
                    color: #666;
                }
            }

            .text {
                line-height: 1.6;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        &:hover {
            .image-container img {
                transform: scale(1.1);
            }
        }
    }
}
</style>
